<template>
  <div style="padding: 10px" class="experPage">

    <div class="form-gourp dashboard-detail-body" >
      <div class="align-left" style="margin-bottom: 10px">
        <span style="font-weight: bold">任务名称：</span>
        <span>{{taskname}}</span>
      </div>

      <div class="align-left" style="margin-bottom: 10px">
        <span style="font-weight: bold">构建状态：</span>
        <span v-if="buildStatus === 1">
          构建中
        </span>
        <span v-else-if="buildStatus === 2">
          构建成功
        </span>
        <span v-else-if="buildStatus === 3">
          构建失败
        </span>
        <span v-else>
          未开始
        </span>
      </div>

      <div class="align-right">
        <Button type="default"  icon="md-construct"  @click="buildContest">开始构建</Button>
      </div>

      <Divider/>

      <Steps  :current="2" direction="vertical" style="margin: 10px">
        <Step v-for="(item,index) in buildSteps" :key="index" :title="item.title" :content="item.content"></Step>
      </Steps>

    </div>

    <div class="dashboard-detail-body">
      <div class="align-right">
        <Button type="default"  icon="md-power" @click="closeDialog">关闭</Button>
      </div>
    </div>


  </div>
</template>
<script>
import $ from 'jquery';
import { buildContest, createComplexExericeTeam, setBuildFlag} from '@/api/new-exper.js';


export default {
  name: 'autobuild',
  props: ['taskid','taskname','tasktype'],
  data() {
    return {

      buildStatus: 0,  //0：未开始 1: 构建中 2：构建成功 3：构建失败

      buildSteps: [],

    }
  },
  created() {

    this.getBuildStep();
  },
  mounted() {

  },

  beforeRouteLeave(to, from, next) {
    if (to.path === `/${this.$route.query.action}`) {
      to.query.page = this.$route.query.page ? this.$route.query.page : 1
      next()
    } else {
      next()
    }
  },
  methods: {

    // 构建比赛，相当于黄方下发任务
    buildContest(){
      if (this.taskid !== undefined && this.taskid != null){
        buildContest(this.taskid)
          .then((res) => {
            console.log("buildContest return value: ")
            console.log(res)
            if (res.data.code === 1) {
              if (this.tasktype === 6){  // 综合演练类型，需要调用综合演练接口部署人员
                console.log("综合演练下发成功，taskid=" + this.taskid)
                createComplexExericeTeam(this.taskid);
              }
              // 设置已构建标识,buildFlag = 1 表示已构建，为0或没有buildFlag则是未构建
              setBuildFlag(this.taskid,1)

            } else {
              this.$Message.info({
                content: '构建比赛失败, taskName=' + this.taskname + ", 错误原因：" + res.data.message,
                duration: 5,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }else {
        this.$Message.info({
          content: '构建比赛参数错误， taskid=' + this.taskid ,
          duration: 3,
        });
      }
    },

    closeDialog() {
      this.$emit('closePopup')
    },

    // 获取构建步骤
    getBuildStep(){
      this.buildSteps =  [
        {title: "已完成",
          content: "创建队伍人员"
        },
        {title: "已完成",
          content: "创建场景"
        },
        {title: "进行中",
          content: "创建工程"
        },
        {title: "待进行",
          content: "人员分配"
        },
        {title: "待进行",
          content: "靶标分配"
        },
        {title: "待进行",
          content: "构建成功"
        }
      ];

    },

  }
}
</script>
<style scoped>


.form-gourp {
  border: 1px solid #DEE0E4;
  /*margin-top: 5px;*/
  margin-bottom: 20px;
  position: relative;
  padding: 10px;
}

.form-gourp:last-child {
  margin-bottom: 0;
}

.form-title {
  color: #515a6e;
  font-weight: bold;
  position: absolute;
  top: -9px;
  left: 10px;
  background-color: #FFFFFF;
  display: inline-block;
  padding: 0 6px;
}

.dashboard-detail-body {
  display: flex;
  flex-direction: column;
  /*font-weight: bold;*/
  /*font-size: 12px;*/
}

.align-right {
  align-self: flex-end;
}

.align-left{
  align-self: flex-start;
}



</style>
